<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>排行榜</title>
		<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
		<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
		<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
			<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
			<link href="css/index.css" rel="stylesheet" type="text/css"/>
		<link href="css/ranking.css" rel="stylesheet" type="text/css"/>

		<style>
			.user-logout{
				color: #222222;
			}
			.user-logout:hover{
				color: orange;
			}
		</style>
	</head>
	<body>
		
		<div id=app>
			<div class="td-header" :class="{ 'is-sticky': isSticky }">
				<div class="td-header-content">
					<div class="td-header-logo">
						<img src="image/logo.png" />
						<li> 土豆小说网 </li>
					</div>
					<div class="td-header-right">
						<div class="right-shouye">
							<a href="index.html">首页</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookstore.html">书库</a>
							 
						</div>
						<div class="right-shouye">
							<a href="bookshelf.html">书架</a>
							 
						</div>
						<div class="right-shouye">
							<a href="ranking.html">排行榜</a>
							 
						</div>
						<div class="right-search">
							<input placeholder="请输入书名或作者名" v-model="selectneirou">
							<img @click="select()" style="cursor: pointer;width: 15px;height: 18px;" src="https://ziyilin.oss-cn-shanghai.aliyuncs.com/%E6%90%9C%E7%B4%A21.png" />

						</div>
						<div class="serial-divider  byte-divider byte-divider-vertical" style="margin-right: 40px;"></div>
						<div class="right-user">
							<a  v-if="!isLogged" href="login.html"> <div class="user-login">登录</div></a>
							<a v-if="!isLogged" href="login.html"><div class="user-reg">注册</div></a>
							<div v-if="isLogged" style="display: flex; align-items: center;cursor: pointer;"  >
								<el-avatar   icon="el-icon-user-solid" :src="this.user.avatar"> </el-avatar>
								<span @click="geren()"  style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px; ">{{this.user.username}} </span>
							</div>
							<div v-if="isLogged" style="display: flex; align-items: center;">
								<span    class="user-logout" @click="logout()" style="margin-left: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis; width: 100px;cursor: pointer; ">退出 </span>
							</div>

						</div>
	 		 
					</div>
				</div>
			</div>
			<div class="rank">
				<div class="rank-main">
					 <div class="rank">
						 <div class="rank-wrap">
							 	<el-row class="tac" style="margin-top: 20px;">
							 	  <el-col :span="12" style="width: 100%;">
							 	     
							 	    <el-menu
							 	      default-active="2"
							 	      class="el-menu-vertical-demo"
							 	      @open="handleOpen"
							 	      @close="handleClose">
<!--							 	      <el-submenu index="1">-->
<!--							 	        <template slot="title">-->
<!--							 	          <i class="el-icon-location"></i>-->
<!--							 	          <span>阅读榜</span>-->
<!--							 	        </template>-->
<!--							 	        <el-menu-item-group>-->
<!--							 	          -->
<!--							 	          <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--							 	          <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--							 	        </el-menu-item-group>-->
<!--							 	-->
<!--							 	      </el-submenu>-->
<!--									  <el-submenu index="5">-->
<!--									    <template slot="title">-->
<!--									      <i class="el-icon-location"></i>-->
<!--									      <span>阅读榜</span>-->
<!--									    </template>-->
<!--									    <el-menu-item-group>-->
<!--									      -->
<!--									      <el-menu-item index="1-1">选项1</el-menu-item>-->
<!--									      <el-menu-item index="1-2">选项2</el-menu-item>-->
<!--									    </el-menu-item-group>-->
<!--									  							 	-->
<!--									  </el-submenu>-->
							 	      <el-menu-item index="2">
							 	        <i class="el-icon-menu"></i>
							 	        <span slot="title">阅读榜</span>
							 	      </el-menu-item>
									  
<!--							 	      <el-menu-item index="3"  >-->
<!--							 	        <i class="el-icon-document"></i>-->
<!--							 	        <span slot="title">阅读榜</span>-->
<!--							 	      </el-menu-item>-->
<!--							 	      <el-menu-item index="4">-->
<!--							 	        <i class="el-icon-setting"></i>-->
<!--							 	        <span slot="title">阅读榜</span>-->
<!--							 	      </el-menu-item>-->
							 	    </el-menu>
							 	  </el-col>
								</el-row>
						 </div>
						 <div class="rank-mulu">
							 <header class="muye-rank-wrap-header">
								 <div>
									 <h1>阅读榜</h1>
									 <p>根据实时阅读热度排行</p>
								</div>
								<span class="rank-info">榜单说明 </span>
							</header>
							<div class="rank-mulu-list">
								<div class="list-book"    v-for="(item,index) in novelList"  @click="Jump(item.novelId)">
									<div class="book-item-index">
										<h1>0{{index+1}}</h1>
										<p>-</p>
									</div>
									<div class="muye-book-cover book-item-cover is-book has-hover">
										<div class="book-cover" style="border-radius: 5px;">
											<img class="book-cover-img  loaded" :src="item.coverImage" :alt="item.title">
											<div class="book-effect book-animate-effect"></div>
										</div>
									</div>
									<div class="book-item-text">
										<div class="title">
											<a href="/page/7180279419959774247" class="font-DNMrHsV173Pd4pgy">{{item.title}}</a>
										</div>
										<div class="author">
											<a href="/author-page/55156100895" target="_blank">
												<span class="font-DNMrHsV173Pd4pgy">{{item.authorName}}</span>
											</a>
										</div>
										<div class="desc abstract font-DNMrHsV173Pd4pgy">
											{{item.introduction}}　
									　　</div>
										<div class="book-item-footer">
											<span v-if="item.statu == 1"   class="book-item-footer-status">连载中</span>
											<span v-else-if="item.statu == 0"  class="book-item-footer-status">已完结</span>
											<div class="serial-divider  byte-divider byte-divider-vertical"></div>
											<span class="book-item-count">在读：{{item.readers*0.0001}}万</span>
											<div class="serial-divider  byte-divider byte-divider-vertical"></div>
											<span class="book-item-footer-last">
												<a class="chapter" href="/reader/7375783664904323609">最近更新：{{item.chapterTitle}}</a>
											</span>
											<span class="book-item-footer-time">{{item.publishDatezuixin}}</span>
										</div>
									</div>
								</div>

							</div>
						 </div>
					 </div>
				</div>
				
			</div>
			
			<div class="td-footer">
				  <p>Company Name</p>
				 <p>Address: 123 Street, City, Country</p>
				 <p>Email: info@example.com</p>
			</div>
		</div>
	</body>
	
	
	
	<script>
	 
	 
	
	var v = new Vue({
		el : "#app",
		data() {
			  
		 
			 return {

				  isSticky: false,
				  author_name: 'lisi',
				  category: '悬疑脑洞',
				  title: '夜幕之下',
				 user:{
					 userId: '',
					 username: '',
					 avatar: '',
				 },
				 isLogged: false,//是否登录
				 novelList: [{}],//小说列表
				 selectneirou: '',//搜索框内容
				};
			},
	    mounted() {
			window.addEventListener('scroll', this.handleScroll);
			this.iflogin();
			this.queryRanking();
		},
		methods: {
			handleScroll() {
				const scrollHeight = window.scrollY || document.documentElement.scrollTop;
				const threshold = 50;
	
				this.isSticky = scrollHeight > threshold;
			},
			 handleOpen(key, keyPath) {
			        console.log(key, keyPath);
			  },
			  handleClose(key, keyPath) {
				console.log(key, keyPath);
			  },
			iflogin(){
				axios.get('/user/iflogin').then(res=>{

					if(res.data != ""){
						this.user.userId = res.data
 						axios.get('/user/getUser?userId='+this.user.userId).then(res=>{
							this.user = res.data;
						});

						this.isLogged =  true;
					}

				});

			},
			logout(){
				axios.post('/user/logout').then(res=>{
					this.isLogged = false;
					this.iflogin();
					window.location.href = "index.html";

				});

			},
			//查询排行榜
			queryRanking() {
				axios.post('/ranking/list').then(res => {

					this.novelList = res.data;

				});
			},
			// 搜索
			select(){
				axios.get('/other/select/select?selectneirou='+this.selectneirou).then(res=>{
					if(res.data == "ok"){
						window.location.href = "select.html"
					}

				});

			},
			geren(){
				window.location.href = "user.html"
			},
			Jump(novelId){
				window.location.href = "novel.html#"+novelId
			}
		}
		 
		 
		 
	})
	 
	</script>
</html>
